<template>
  <vab-card
    :class="editableTabs && editableTabs.length >0 && editableTabs.length > 1 || 0 ? 'div_bank2' : 'div_bank1'"
    shadow="never"
  >
    <el-tabs
      type="border-card"
      v-model="editableTabsValue"
      :closable="editableTabs.length > 1 && route.query.type != 4"
      @tab-remove="removeTab"
    >
      <el-tab-pane
        v-for="(items, i) in editableTabs"
        :key="items.name"
        :label="items.title"
        :name="items.name"
        style="padding: 20px"
      >
        <template #label>
          {{ items.title }}
          <div  v-if="route.query.type != 4">
            <vab-icon
              icon="file-copy-2-line"
              style="margin-right: 4px; margin-left: 8px"
              @click="addTab(editableTabsValue)"
              title="复制"
            />
            <vab-icon icon="add-box-line" title="添加" @click="addTab(0)" />
          </div>
        </template>
        <el-form :model="base_formData[i]" :disabled = 'route.query.type == 4'>
        <el-row :gutter="24">
          <el-col
            v-for="(item, index) in items.content"
            :key="index"
            :xs="24"
            :sm="12"
            :md="12"
            :lg="8"
            :xl="8"
          >
<!--            <el-form-item :label="item.label" :prop="item.value" :rules="rules(item.value)">-->
            <el-form-item :label="item.label" :prop="item.value">
              <el-input
                v-if="item.value != 'country'"
                v-model.trim="item.item"
                @change="listValue(item.value, $event,items.name,'')"
              />
              <el-select
                placeholder=" "
                v-if="item.value == 'country'"
                v-model="item.item"
                filterable
                style="width: 100%"
                @change="listValue(item.value,$event,items.name,item.children)"
              >
                <el-option
                  v-for="item in item.children"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </vab-card>
</template>
<script lang="ts" setup>
  import {defineEmits} from "vue/dist/vue";

  defineOptions({
    name: 'AddBankMode',
  })
  import { ref } from 'vue'
  import {organization_list} from "/@/api/dms/organization";
  import {options_list} from "/@/api/dms/options";
  import {customerGroup_list} from "/@/api/dms/customerGroup";
  const route:any = useRoute() //route.query.id
  const props = defineProps(['base_formDatas'])
  const base_formData = reactive<any>(props.base_formDatas)
  const editableTabsValue = ref(base_formData && base_formData[0].id || 1)
  const edita = ref<any>(null)
  //开户国家
  const account_country = ref<any>([])
  onMounted(()=>{
    get_list()
  })
  const get_list=()=>{
    options_list({module:'account_country'}).then((data:any)=>{
      // console.log(data,'开户国家')
      if(data.code == 200){
        account_country.value = data.data?.map((i:any)=>{return {value:i.uid,label:i.name}}) || []
      }
    })
  }
  const editableTabs = ref(
    base_formData?.map((item: any, index: any) => {
      return {
        title: `银行信息 ${index == 0 ? '' : index}`,
        name:  item.id,
        content: [
          { label: '开户国家', value: 'country', item: item.country ,children: account_country},
          {
            label: '账户名称',
            value: 'account_name',
            item: item.account_name,
          },
          {
            label: '银行账号',
            value: 'invoice_bank_account',
            item: item.invoice_bank_account,
          },
        ],
      }
    }) || []
  )
  let tabIndex =  props.base_formDatas && props.base_formDatas.length || 1
  const emit = defineEmits(['update:base_formDatas','update:bank_ref'])
  const addTab = (targetName: number) => {
    if (targetName == 0) {
      const newTabName: any = `${++tabIndex}`
      editableTabs.value.push({
        title: `银行信息 ${newTabName - 1}`,
        name: String(new Date().getTime()).slice(-6),
        content: [
          { label: '开户国家', value: 'country', item: '',children:account_country},
          {
            label: '账户名称',
            value: 'account_name',
            item: '',
          },
          {
            label: '银行账号',
            value: 'invoice_bank_account',
            item: '',
          },
        ],
      })
      editableTabsValue.value = newTabName
      props.base_formDatas.push({
        country: '',
        account_name: '',
        invoice_bank_account: '',
        id: String(new Date().getTime()).slice(-6),
      })
    } else {
      const assignment = editableTabs.value.filter(
        (tab: any) => tab.name == targetName
      )[0]
      const newTabName: any = `${++tabIndex}`
      editableTabs.value.push({
        title: `银行信息 ${newTabName - 1}`,
        name: String(new Date().getTime()).slice(-6),
        content: [
          {
            label: '开户国家',
            value: 'country',
            item: assignment.content[0].item,
          children:[
        { label: '中国', value: '1' },
        { label: '美国', value: '2' },
      ]},
          {
            label: '账户名称',
            value: 'account_name',
            item: assignment.content[1].item,
          },
          {
            label: '银行账号',
            value: 'invoice_bank_account',
            item: assignment.content[2].item,
          },
        ],
      })
      editableTabsValue.value = newTabName
      props.base_formDatas.push(
        {
          country: assignment.content[0].item,
          account_name: assignment.content[1].item,
          invoice_bank_account: assignment.content[2].item,
          id: String(new Date().getTime()).slice(-6),
        }
      )
    }
  }
  const removeTab = (targetName: string, ab: any) => {
    const tabs = editableTabs.value
    let activeName: any = editableTabsValue.value
    if (activeName === targetName) {
      tabs.forEach((tab: any, index: any) => {
        if (tab.name === targetName) {
          const nextTab = tabs[index + 1] || tabs[index - 1]
          if (nextTab) {
            activeName = nextTab.name
          }
        }
      })
    }
    editableTabsValue.value = activeName
    editableTabs.value = editableTabs.value.filter(
      (tab: any) => tab.name !== targetName
    )
    const index = props.base_formDatas.findIndex((item:any) => item.id === targetName);
    if (index !== -1) {
      props.base_formDatas.splice(index,1)
    }
  }
  const listValue = (va: any, e: any,id_number:any,ma:any) => {
    props.base_formDatas.map((item: any) => {
      if (item.id === id_number) {
        if(va == 'country'){
          return (item[va] = e,item.country_name = ma.filter((i:any)=>i.value == e)[0].label)
        }else {
          return (item[va] = e)
        }
      } else {
        return {
          ...item,
        }
      }
    })
  }
  const rules = (va:any)=>{
    if(va== 'invoice_bank_account' ){
      return  [
        { pattern: /^\d{9,18}$/, message: '请输入正确的银行账号', trigger: 'blur' }
      ]
    }
  }
</script>
<style lang="scss" scoped>
  .div_bank1 {
    :deep() {
      .el-tabs__nav {
        width: 100% !important;
      }
      .el-tabs__content{
        padding: 0;
      }
      .el-tab-pane{
        padding-bottom: 0px !important;
      }
      .el-tabs__item {
        display: flex;
        justify-content: space-between;
        width: 100% !important;
        padding: 10px 20px !important;
        height: 45px;
      }
      .el-tabs__item:hover {
        color: #000;
      }
      .el-tabs__item.is-active {
        color: #000;
        &:hover{
          color:  #000;
        }
      }
      .el-tabs__active-bar {
        height: 0px;
      }
      .el-tabs__nav-wrap::after {
        height: 1px;
      }
      .el-card__body {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
      }
      .el-tabs--border-card{
        border: 0px solid #fff !important;
      }
      .el-tabs__nav{
        border-bottom:1px solid #eee ;
      }
      .is-active{
        border-right: 0px solid #eee;
      }
    }
  }
  .div_bank2 {
    :deep() {
      .el-tabs__content{
        padding: 0;
      }
      .el-tab-pane{
        padding-bottom: 0px !important;
      }
      .el-tabs__item {
        padding: 10px 20px !important;
        height: 45px;
      }
      .el-tabs__nav-next,
      .el-tabs__nav-prev {
        line-height: 61px;
      }
      /* .el-tabs__item:hover {
        color: #000;
      }
      .el-tabs__item.is-active {
        color: #000;
      }*/
      .el-tabs__active-bar {
        height: 0px;
      }
      .el-tabs__nav-wrap::after {
        height: 1px;
      }
      .el-card__body {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
      }
      .el-tabs--border-card{
        border: 0px solid #fff !important;
      }
      .el-tabs__nav{
        border-bottom:1px solid #eee ;
      }
     /* .is-active{
        border-right: 0px solid #eee !important;
      }*/
    }
  }
  // 按钮 靠右
  .tabs_2{
    position: absolute;
    right: 10px;
    top: 15px;
    z-index: 99999;
  }
</style>
